<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>height的各种情况</title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			
			div {
				width: 300px;
				height: 200px;
				border: 5px solid blue;
				margin: 50px;
				overflow: scroll;
				padding: 10px 0px 50px 0px;
			}
			/*
			 16
			 * */
			
			#s1 {
				background: blue;
				height: 300px;
				border: 10px solid red;
				margin: 10px;
			}
		</style>
	</head>

	<body>

		<div id="h1">
			<p id="s1">子元素很高
				<p>
		</div>
		<div id="h2">
			<nav id="s1">子元素很高
				<nav>

		</div>
		<div id="h3"></div>
		<script src="tool.js"></script>
		<script>
			var h1 = $("h1");
			var css1 = getStyle(h1);
			console.log(css1.height); //height:受box-sizing影响
			console.log("clientHeight:" + h1.clientHeight); //height:受box-sizing影响
			console.log("offsetHeight:" + h1.offsetHeight); // 
			console.log("scrollHeight:" + h1.scrollHeight); //各浏览器差距太大
		</script>
	</body>

</html>